---
title: "Align Content"
# description: "Utilities for controlling how rows are positioned in multi-row flex and grid containers."
description: "用于控制在多行 flex 和网格容器中行的位置的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/alignContent'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Start

<!-- Use `content-start` to pack rows in a container against the start of the cross axis: -->
使用 `content-start` 将容器中的行相对于交叉轴的起点开始排列。

```html rose
<template preview class="p-4">
  <div class="flex content-start flex-wrap h-48 bg-stripes bg-stripes-rose-500 rounded-lg">
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-rose-500">1</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-rose-500">2</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-rose-500">3</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-rose-500">4</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-rose-500">5</div>
    </div>
  </div>
</template>

<div class="h-48 flex flex-wrap **content-start** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

## Center

<!-- Use `content-center` to pack rows in a container in the center of the cross axis: -->
使用 `content-center` 将容器中的行相对于交叉轴的中心开始排列。

```html indigo
<template preview class="p-4">
  <div class="flex content-center flex-wrap h-48 bg-stripes bg-stripes-indigo-500 rounded-lg">
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">1</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">2</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">3</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">4</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">5</div>
    </div>
  </div>
</template>

<div class="h-48 flex flex-wrap **content-center** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

## End

<!-- Use `content-end` to pack rows in a container against the end of the cross axis: -->
使用 `content-end` 将容器中的行相对于交叉轴的终点开始排列。

```html emerald
<template preview class="p-4">
  <div class="flex content-end flex-wrap h-48 bg-stripes bg-stripes-emerald-500 rounded-lg">
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500">1</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500">2</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500">3</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500">4</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-emerald-500">5</div>
    </div>
  </div>
</template>

<div class="h-48 flex flex-wrap **content-end** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

## Space between

<!-- Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line: -->
使用 `content-between` 来分配容器中的行，使每行之间有相等的空间。

```html amber
<template preview class="p-4">
  <div class="flex content-between flex-wrap h-48 rounded-lg bg-stripes bg-stripes-amber-500">
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500">1</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500">2</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500">3</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500">4</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-amber-500">5</div>
    </div>
  </div>
</template>

<div class="h-48 flex flex-wrap **content-between** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

## Space around

<!-- Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line: -->
使用 `content-around` 将行分布在一个容器中，使每行周围有相等的空间。

```html lightBlue
<template preview class="p-4">
  <div class="flex content-around flex-wrap h-48 bg-stripes bg-stripes-light-blue-500 rounded-lg">
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500">1</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500">2</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500">3</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500">4</div>
    </div>
    <div class="w-1/3 p-2">
      <div class="h-12 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-light-blue-500">5</div>
    </div>
  </div>
</template>

<div class="h-48 flex flex-wrap **content-around** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
```

## 响应式

<!-- To control the alignment of flex content at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above. -->
要在特定的断点处控制 flex 内容的对齐，可以在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用 `md:content-around` 来仅在中等尺寸及以上的屏幕应用 `content-around` 功能。

```html
<div class="content-start **md:content-around** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="alignContent" name="align-content" />

### 禁用

<Disabling plugin="alignContent" name="align-content" />
